<template>
	<div class="page-container" :style="{
		background:bgStyle
	}">
		<!-- 顶部导航区域 -->
		<div class="navigation" ref="navigation"
		:style="{
			fontSize:titleSize+'px',
			color:titleColor
		}"
		>
			农业数据实时监控系统
		</div>
		<div class="changeTheme" @click="changeThem">主题切换</div>
		<!-- 底部大盒子 -->
		<div class="content">
			<!-- 左侧俩个 -->
			<div class="left-content">
				<div class="left-content-top">
					<area-plant></area-plant>
					
				</div>
				<div class="left-content-bottom">
					<harvest></harvest>
				</div>
			</div>
			<!-- 中间俩个 -->
			<div class="center-content">
				<div class="center-content-top">
					<Proportion></Proportion>
				</div>
				<div class="center-content-bottom">
					<Crop></Crop>
				</div>
			</div>
			<!-- 右侧俩个 -->
			<div class="right-content">
				<div class="right-content-top">
					<trend></trend>
				</div>
				<div class="right-content-bottom">
					<total></total>
				</div>
			</div>
		</div>
		
	</div>
</template>

<script>
import areaPlant from './areaPlant.vue'
import harvest from './harvest.vue'
import Proportion from './cropAreasProportion.vue'
import Crop from './CropCoverage.vue'
import trend from "./Trend.vue"
import total from "./TotalArea.vue"
	
	export default {
		
		data(){
			return{
				//大标题字体
				titleSize:0,
				isShow:true,
				bgStyle:'#fff',
				titleColor:'#000'
			}
		},
		computed:{
			
		},
		mounted() {
			this.screen()
			window.addEventListener('resize',this.screen)

		},
		methods:{
			//大标题字体的自适应
			screen(){
				this.titleSize = this.$refs.navigation.offsetWidth/40
			},
			//封装一个切换主题的事件
			changeThem(){
				//开关值 取反

				this.isShow= !this.isShow
				if(this.isShow){
					//打开开关
					this.bgStyle = '#fff'
					this.titleColor = '#000'
				}else{
					this.bgStyle = '#333'
					this.titleColor='#fff'
				}
				//改变仓库中的主题状态值
				this.$store.commit('changeTheme',this.isShow)
			}
			
		},
		components:{
			areaPlant,
			harvest,
			Proportion,
			Crop,
			trend,
			total
		}
	}
</script>

<style scoped>


	.page-container{
		display: flex;
		flex-direction: column;
		/* background-image: url(../../public/static/img/bgc01.png) */
		/* background-color: #333333; */
	}
	/* 顶部导航样式 */
	.navigation{
		flex: 2;
		width: 100%;
		/* background-color: orange; */
		background-image: url(../../public/img/top02.png);
		background-position: center bottom;
		background-repeat: no-repeat;
		font-weight: 600;
		color: #FCF8E3;
		text-align: center;
		/* line-height: 3.2rem; */
	}
	.content{
		flex: 15;
		display: flex;
	}
	/* 左侧盒子 */
	.content .left-content{
		flex: 1;
		/* border: 1px solid #38C5EC; */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}
	.content .left-content .left-content-top{
		width: 95%;
		height: 53%;
		border: 1px solid #38C5EC;
	}
	.content .left-content .left-content-bottom{
		width: 95%;
		height: 42%;
		border: 1px solid #38C5EC;
	}
	
	/* 中间盒子 */
	.content .center-content{
		flex: 2;
		/* border: 1px solid #38C5EC; */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}
	.content .center-content .center-content-top{
		width: 95%;
		height: 22%;
		border: 1px solid #38C5EC;
	}
	.content .center-content .center-content-bottom{
		width: 95%;
		height: 75%;
		border: 1px solid #38C5EC;
	}
	
	/* 右侧盒子 */
	.content .right-content{
		flex: 1;
		/* border: 1px solid #38C5EC; */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}
	.content .right-content .right-content-top{
		width: 95%;
		height: 48%;
		border: 1px solid #38C5EC;
	}
	.content .right-content .right-content-bottom{
		width: 95%;
		height: 48%;
		border: 1px solid #38C5EC;
	}
	
	/* 主题切换 */
	.changeTheme{
		color: pink;
		position: fixed;
		top: 0;
		right:1.25rem;
	}
</style>
